<style>

  .chartLabel {
    text-align: center;
    font-size: 20px;
    font-weight: 300;
  }
  .chartHolder {
    min-height: 300px;
  }

</style>

<div class="container-fluid p-4">
	<div class="row">
	<div class="col-md-12 pl-0 pr-0">
      <table class="table table-bordered table-responsive-lg">
        <thead>
          <tr>
            <th colspan="4" scope="col" style="text-align: center;">General Information</th>
            <th colspan="4" scope="col" style="text-align: center;">Pool Information</th>
            <th colspan="4" scope="col" style="text-align: center;">Network Information</th>
          </tr>
        </thead>
        <tbody>
            {{ for(var pool in it.stats.pools) { }}
              {{ if(pool !== it.stats.coin) continue; }}
              <tr>
                <td style="text-align:center;vertical-align: middle;">Coin: </td>
                <td style="text-align:center;vertical-align: middle;"><img src="/static/icons/{{=String(it.stats.coin)}}.png" alt="icon" style="height: 24px;" /> {{=(String(it.stats.coin).charAt(0).toUpperCase() + String(it.stats.coin).slice(1))}}</td>
                <td style="text-align:center;vertical-align: middle;">Workers:</td>
		<td id="poolWorkers" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].workerCount}}</td>
                <td style="text-align:center;vertical-align: middle;">Hashrate:</td>
                <td id="poolHashRate" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].hashrateString}}</td>
                <td style="text-align:center;vertical-align: middle;">Pending Blocks:</td>
                <td id="pendingBlocks" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].blocks.pending}}</td>

                <td style="text-align:center;vertical-align: middle;">Hashrate:</td>
                <td style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].poolStats.networkSolsString}}</td>

                <td style="text-align:center;vertical-align: middle;">Height:</td>
                <td style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].poolStats.networkBlocks}}</td>

              <tr>
              <tr>
                <td style="text-align:center;vertical-align: middle;">Ports:</td>
                {{ for(var pool in it.poolsConfigs) { }}
                  {{ if(pool !== it.stats.coin) continue; }}
                  <td colspan="3" style="text-align:center;vertical-align: middle;">{{=Object.keys(it.poolsConfigs[pool].ports)}}</td>
                  {{ break; }}
                {{ } }}
                <td style="text-align:center;vertical-align: middle;">Valid Shares:</td>
                <td id="validShares" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].poolStats.validShares}}</td>
                <td style="text-align:center;vertical-align: middle;">Mature Blocks:</td>
                <td id="confirmedBlocks" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].blocks.confirmed}}</td>
                <td style="text-align:center;vertical-align: middle;">Difficulty:</td>
                <td style="text-align:center;vertical-align: middle;">{{=Number(Math.round(it.stats.pools[pool].poolStats.networkDiff + 'e' + 4) + 'e-' + 4)}}</td>

                <!--<td style="text-align:center;">Connections:</td>
                <td style="text-align:center;">{{=it.stats.pools[pool].poolStats.networkConnections}}</td>-->
			
				{{ var blocktime = it.stats.pools[pool].blockTime || 0; }}
				{{ var blockchange = it.stats.pools[pool].blockChange || 0; }}				
                {{ var blockheight = it.stats.pools[pool].poolStats.networkBlocks || 0; }}
                
                {{ var changehours = Number.parseFloat((((blockchange) - (blockheight % blockchange)) / blocktime)).toFixed(2) || 0; }}
                {{ var changeblocks = ((blockchange) - (blockheight % blockchange)) || 0; }}
                
				<td colspan='2' style="text-align:center;vertical-align: middle;">Diff change in: {{=changeblocks}} blocks (appx. {{=changehours}} hours)</td>
               
                
              </tr>
		
		<tr>
		<td colspan="12" style="text-align:center;vertical-align: middle;">{{=it.stats.pools[pool].name.charAt(0).toUpperCase() + it.stats.pools[pool].name.slice(1)}} Donations: {{=(it.poolsConfigs[pool].donateaddress||'none')}}</td>
		</tr>

              {{ break; }}
            {{ } }}
        </tbody>
      </table>
  </div>
  </div>

  <div class="row">&nbsp;<br /></div>

  <div class="row justify-content-center">
  <div class="col-md-12 chartWrapper">
      <div class="chartLabel">Hashrate History</div>
      <div class="chartHolder"><canvas id="poolHashChart" height="50"></canvas></div>
  </div>
  </div>

  <div class="row">&nbsp;<br /></div>

  <div class="row justify-content-center">
    <div class="col-md-12 chartWrapper">
      <div class="chartLabel">Pending Block History</div>
      <div class="chartHolder"><canvas id="blockChart" height="50"></div>
    </div>
  </div>

  <div class="row">&nbsp;<br /></div>

  <div class="row justify-content-center">
    <div class="col-md-12 chartWrapper">
      <div class="chartLabel">Worker History</div>
      <div class="chartHolder"><canvas id="poolWorkerChart" height="50"></canvas></div>
    </div>
  </div>

</div>



<script>
  //use doT to get the name of the pool (a.k.a. name of coin)
  var poolName = "{{=it.stats.coin}}";
  //Used for tracking stats used in graphs and tables
  document.querySelector('main').appendChild(document.createElement('script')).src = '/static/stat_tracker.js';
  //Used for EMA calculations and other misc. fucntions
  document.querySelector('main').appendChild(document.createElement('script')).src = '/static/methods.js';
  //Then connect the graph handler
  document.querySelector('main').appendChild(document.createElement('script')).src = '/static/pool_stats.js';
</script>
